<template>
  <div class="theoretical-study">
    <div class="banner">
      <div class="title-t">理论研究</div>
      <div class="title-b">理论宣传 推广普及社会科学理论 提高人们对客观世界规律的认识</div>
    </div>
    <div class="common-title" style="width: var(--main-wrapper); padding-bottom: 14px;">
      <div class="title"><span><span>社科</span>资讯</span>/Social Science Information</div>
      <div class="more">
        <div class="line"></div>
        <span>查看更多</span>
        <div class="line"></div>
      </div>
    </div>
    <div class="information main-wrapper">
      <div class="info-l">
        <swiper :modules="[Autoplay, Pagination]" :pagination="{ clickable: true }" autoplay>
          <swiper-slide v-for="(studyItem, studyIndex) in 3" :key="studyIndex">
            <div class="scroll-item">
              <img class="scroll-img" src="@/assets/images/demo/dongtai.png">
              <div class="scroll-title">湖北省第十二届社会科学普及宣传周</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="info-r">
        <div v-for="(infoItem, infoIndex) in 3" :key="infoIndex" class="info-item">
          <div class="date">11/02</div>
          <div class="title">湖北省第十二届社会科学普及宣传周启动仪式在汉举行</div>
        </div>
        <div class="more-fun">
          <div class="more-function">
            更多功能
            <div class="line"></div>
            <div class="desc">More function</div>
          </div>
          <div class="more-list" style="margin-right: 16px;">
            <div class="common-r-title">
              课题申报
            </div>
            <div class="function-item">
              <img style="width: 33px;" src="@/assets/images/front/ketishenbao.png">
              课题申报
            </div>
          </div>
          <div class="more-list">
            <div class="common-r-title">
              社科奖申报
            </div>
            <div class="function-item" style="width: 37%;">
              <img style="width: 28px;" src="@/assets/images/front/shekeshenbao.png">
              社科奖申报
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="consultation">
      <div class="consultation-main main-wrapper">
        <div class="common-title" style="padding-bottom: 14px;">
          <div class="title" style="color: #fff;"><span>最新课题立项</span>/Latest project approval</div>
          <div class="more">
            <div class="line"></div>
            <span style="color: #fff;">查看更多</span>
            <div class="line"></div>
          </div>
        </div>
        <swiper :modules="[Autoplay]" :slides-per-view="3" :space-between="30" autoplay>
          <swiper-slide v-for="item in 8" :key="item" class="consultation-item">
            <img src="@/assets/images/demo/news_demo.png">
            <div class="consultation-date">
              <div class="month">May</div>
              <span class="date today">2{{ item }}</span>
            </div>
            <div class="content">
              <div class="title otw-2">社科专家调研江汉平原纺织服装承接产业转移和转型升级</div>
              <div class="desc otw-6">
                新闻网讯 8月15日至17日，“2023年社科专家市县行活动”第四场调研来到荆州“2023年社科专家市县行活动”第四场调研来到荆州。
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="common-title main-wrapper" style="width: var(--main-wrapper); padding-bottom: 14px;">
      <div class="title"><span><span>社科</span>组织</span>/List of Social Science Achievements</div>
      <div class="more">
        <div class="line"></div>
        <span>查看更多</span>
        <div class="line"></div>
      </div>
    </div>
    <div class="organization main-wrapper">
      <div class="org-l">
        <img src="@/assets/images/demo/dongtai.png">
        <div class="l-content">
          <div class="content-header">
            <div class="title otw-1">武汉公共关系协会</div>
            <div class="tag">社科组织</div>
          </div>
          <div class="desc">
            <div class="otw-1">组织成员：张三、张三、张三、张三、张三、张三</div>
            <div class="otw-1">所属学会/单位：华中师范大学</div>
          </div>
          <div class="more">MORE</div>
        </div>
      </div>
      <div class="org-r">
        <div v-for="(orgItem, orgIndex) in 4" :key="orgIndex" class="org-item">
          <div class="title">武汉地区大学语文研究会</div>
          <div class="desc">
            <div class="otw-1">组织成员：张三、张三、张三、张三、张三、张三</div>
            <div class="otw-1">所属学会/单位：华中师范大学</div>
          </div>
        </div>
      </div>
    </div>
    <div class="popularize main-wrapper">
      <div class="common-title">
        <div class="title"><span><span>社科</span>普及</span>/Theoretical learning</div>
        <div class="more">
          <div class="line"></div>
          <span>查看更多</span>
          <div class="line"></div>
        </div>
      </div>
      <div class="popularize-main">
        <div ref="chartMapRef" class="popularize-l"></div>
        <div class="popularize-r">
          <el-scrollbar view-style="padding-right: 32px;" height="100%">
            <div v-for="(teamItem, teamIndex) in teamLocationList" :key="teamIndex" class="team-item">
              <img src="@/assets/images/demo/location.png">
              <div class="mask otw-2">{{ teamItem.name }}</div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default { name: 'TheoreticalStudy' }
</script>
<script setup>
import { ref, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import * as echarts from 'echarts'
import { Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css'
import 'swiper/css/pagination';
import wuhanJson from '@/utils/wuhan-geo.json'
import { useSystemStore } from '@/stores/modules/system.js';

const systemStore = useSystemStore()

/**设置头部 */
systemStore.headerType = 'study_black'
systemStore.headerBgcolor = 'normal'
systemStore.headerFontColor = '0'

/**社科普及 */
const teamLocationList = ref([
  { name: '湖北省第十二届社会科学普及宣传周启动仪式在汉举行', x: '114.55027', y: '30.49588', text: [{ label: '对口支持单位', value: '中南财经政法大学' }] },
  { name: '“企业财务法律风险与合同管控”专题讲座', x: '114.309319', y: '30.592877', text: [{ label: '对口支持单位', value: '中南财经政法大学' }] },
  { name: '武汉市社会科学界联合会在武汉市农业科学院', x: '114.260437', y: '30.573606', text: [{ label: '对口支持单位', value: '中南财经政法大学' }] },
  { name: '武汉市社会科学界联合会在武汉市农业科学院', x: '114.260437', y: '30.573606', text: [{ label: '对口支持单位', value: '中南财经政法大学' }] },
  { name: '武汉市社会科学界联合会在武汉市农业科学院', x: '114.260437', y: '30.573606', text: [{ label: '对口支持单位', value: '中南财经政法大学' }] },
  { name: '武汉市社会科学界联合会在武汉市农业科学院', x: '114.260437', y: '30.573606', text: [{ label: '对口支持单位', value: '中南财经政法大学' }] },
])
echarts.registerMap('WUHAN', wuhanJson);
const option = {
  tooltip: {
    trigger: 'item',
    showDelay: 0,
    transitionDuration: 0.2,
    formatter: function (params) {
      return `
      <div class="map-tooltip">
        <div class="flex-center">${params.name}</div>
        <div class="show-desc">
          <span>主题：</span><span class="map-red">54321</span>
        </div>
        <div class="show-desc">
          <span>服务人次：</span><span class="map-red">66666</span>
        </div>
        <div class="show-desc">
          <span>受众人群：</span><span>高校、机关</span>
        </div>
      </div>
      `
    }
  },
  series: [
    {
      name: '武汉市',
      type: 'map',
      map: 'WUHAN',
      emphasis: {
        color: 'red',
        label: {
          show: true
        },
        itemStyle: {
          areaColor: '#FCC17C'
        },
      },
      itemStyle: {
        areaColor: '#D1E2F4'
      },
      data: [
        { name: '江岸区', value: 4822023 },
        { name: '江汉区', value: 4822023 },
        { name: '硚口区', value: 4822023 },
        { name: '汉阳区', value: 4822023 },
        { name: '武昌区', value: 4822023 },
        { name: '黄陂区', value: 731449 },
        { name: '新洲区', value: 6553255 },
        { name: '洪山区', value: 2949131 },
        { name: '蔡甸区', value: 2949131 },
        { name: '江夏区', value: 2949131 },
        { name: '青山区', value: 38041430 },
        { name: '新洲区', value: 38041430 },
        { name: '东西湖区', value: 38041430 },
        { name: '汉南区', value: 38041430 },
      ]
    }
  ]
};
const chartMapRef = ref(null)
let myChart;
onMounted(() => {
  myChart = echarts.init(chartMapRef.value, null, { renderer: 'svg' })
  myChart.setOption(option);
})
</script>
<style lang='scss' scoped>
.theoretical-study {
  width: 100%;

  .banner {
    width: 100%;
    min-width: var(--main-wrapper);
    height: 360px;
    background-image: url(@/assets/images/front/xuanchuan_banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 39px;

    .title-t {
      font-size: 80px;
      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
      font-weight: bold;
      color: #FFFFFF;
      letter-spacing: 10px;
      text-shadow: 0px 3px 6px #000000;
      -webkit-text-stroke: 1px #FFFFFF;
      margin-bottom: 31px;
    }

    .title-b {
      font-size: 20px;
      font-weight: 400;
      color: #FFFFFF;
      letter-spacing: 2px;
    }
  }

  .information {
    display: flex;
    gap: 34px;
    margin-bottom: 52px;

    .info-l {
      width: 454px;

      :deep(.swiper-pagination) {
        bottom: 10px;
        width: unset;

        .swiper-pagination-bullet-active {
          background-color: var(--theme-color);
        }
      }


      .scroll-item {
        padding-bottom: 42px;

        .scroll-img {
          width: 454px;
          height: 346px;
          display: block;
          object-fit: cover;
          position: relative;
        }

        .scroll-title {
          position: absolute;
          padding: 12px 0;
          background-color: rgba(0, 0, 0, 0.44);
          padding-left: 15px;
          left: 0;
          bottom: 42px;
          font-size: 22px;
          font-weight: 500;
          color: #FFFFFF;
          width: 454px;
          overflow: hidden;
          text-overflow: ellipsis; //文本溢出显示省略号
          white-space: nowrap; //文本不会换行
        }
      }
    }

    .info-r {
      flex: 1;
      width: 0;
      height: 346px;
      background-color: #FAFAFA;
      padding: 26px 36px;
      display: flex;
      flex-wrap: wrap;
      gap: 48px;
      justify-content: space-between;
      position: relative;

      .info-item {
        width: 46%;
        cursor: pointer;

        &:first-child {
          position: relative;

          &::before {
            content: '';
            position: absolute;
            height: 2px;
            bottom: -12px;
            left: 0;
            right: 12%;
            background-color: #343434;
            opacity: 0.1;
          }

          &::after {
            content: '';
            position: absolute;
            width: 2px;
            right: -8px;
            top: 39px;
            bottom: 10px;
            background-color: #343434;
            opacity: 0.1;
          }
        }

        .date {
          font-size: 30px;
          font-weight: 600;
          color: #343434;
        }

        .title {
          font-size: 24px;
          font-weight: 400;
          color: #343434;
        }

        &:hover {
          .title {
            color: var(--theme-color);
            font-weight: bold;
          }
        }
      }

      .more-fun {
        position: absolute;
        width: 439px;
        height: 222px;
        background-color: var(--theme-color);
        right: -21px;
        bottom: -45px;
        padding: 13px 19px;

        .more-function {
          font-size: 16px;
          font-weight: 500;
          color: #FFFFFF;
          font-family: Source Han Sans SC-Medium, Source Han Sans SC;
          margin-bottom: 21px;

          .line {
            margin: 5px 0;
            height: 3px;
            width: 26px;
            background-color: #fff;
          }

          .desc {
            font-size: 14px;
            font-weight: 100;
            opacity: 0.8;
          }
        }

        .more-list {
          display: inline-block;
          width: 48%;

          .common-r-title {
            width: 100%;
            font-size: 18px;
            font-weight: 500;
            color: #FFFFFF;
            font-family: Source Han Sans SC-Medium, Source Han Sans SC;
            border-bottom: 2px solid #B6505C;
            padding-bottom: 8px;
            position: relative;
            display: inline-block;

            &::before {
              content: '';
              position: absolute;
              bottom: -2px;
              left: 0;
              width: 64px;
              height: 2px;
              background-color: #fff;
            }
          }

          .function-item {
            user-select: none;
            cursor: pointer;
            margin-top: 18px;
            width: 30%;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
              height: 33px;
              margin-bottom: 9px;
            }
          }
        }
      }
    }
  }

  .consultation {
    width: 100%;
    margin-bottom: 60px;
    min-width: $middleWrapper;
    min-height: 373px;
    background-image: url(@/assets/images/front/xuanchuan_banner_l.png);
    background-repeat: no-repeat;
    background-size: 100% 373px;

    .consultation-main {
      color: #FFFFFF;
      font-family: Source Han Sans SC-Bold, Source Han Sans SC;
      height: 100%;

      .consultation-item {
        user-select: none;

        width: 473px !important;
        display: inline-block;

        img {
          width: 100%;
          height: 297px;
        }

        .consultation-date {
          margin: 36px 0 6px;
          color: #434343;
          display: flex;

          .month {
            height: 30px;
            font-size: 22px;
            transform: rotate(90deg) translate(20px, 12px);
          }

          .date {
            font-weight: bold;
            font-size: 50px;
            margin-left: -12px;
          }

          .today {
            color: #76150C;
          }
        }

        .content {
          width: 100%;
          height: 200px;
          padding: 8px 20px 20px;
          color: #434343;
          border-left: 1px solid #BCBCBC;

          .title {
            font-weight: bold;
            font-size: 22px;
            margin-bottom: 6px;
          }

          .desc {
            font-size: 16px;
          }
        }
      }
    }
  }

  .organization {
    display: flex;
    height: 518px;
    gap: 25px;

    .org-l {
      width: 707px;
      display: flex;
      flex-direction: column;

      img {
        width: 100%;
        height: 338px;
        display: block;
      }

      .l-content {
        padding: 11px 19px;
        flex: 1;
        height: 0;
        background-color: #FCFCFC;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .content-header {
          display: flex;
          gap: 6px;

          .title {
            flex: 1;
            width: 0;
            font-size: 22px;
            font-weight: bold;
            color: #434343;
          }

          .tag {
            margin-left: auto;
            font-size: 15px;
            font-weight: 500;
            color: #76150C;
            border: 1px solid #76150C;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
          }
        }

        .desc {
          font-size: 20px;
          font-weight: 400;
          color: #434343;
          line-height: 33px;
        }

        .more {
          font-size: 18px;
          font-weight: bold;
          color: #76150C;
          cursor: pointer;
        }
      }
    }

    .org-r {
      flex: 1;
      width: 0;
      height: 100%;
      background-color: #FBF6F7;
      background-image: url(@/assets/images/front/calendar_bg.png);
      background-repeat: no-repeat;
      background-position: top;
      background-size: 100% 77px;
      padding: 20px 38px;

      .org-item {
        cursor: pointer;
        margin-bottom: 13px;
        height: 24%;
        padding-bottom: 15px;
        border-bottom: 1px solid #D9D9D9;
        position: relative;

        &:last-child {
          border-color: transparent;
        }

        .title {
          font-size: 20px;
          font-weight: bold;
          color: #434343;
          margin-bottom: 10px;
        }

        .desc {
          font-size: 18px;
          font-weight: 400;
          color: #434343;
          line-height: 30px;
        }

        &::before {
          content: '';
          position: absolute;
          height: 2px;
          width: 0px;
          transition: all .3s;
          left: 0;
          bottom: -1px;
          background-color: var(--theme-color);
        }

        &:hover::before {
          width: 158px;
        }
      }
    }
  }

  .popularize {
    margin-bottom: 46px;

    .popularize-main {
      width: 100%;
      height: 1095px;
      display: flex;

      .popularize-l {
        flex: 1;
        background-color: #fff;
      }

      .popularize-r {
        width: 374px;
        height: 100%;
        background: #F8F8F8;
        border-radius: 13px;
        border: 1px solid #D9D9D9;
        margin-left: 10px;
        padding: 23px 32px;
        padding-right: 0;

        :deep(.swiper-wrapper) {
          .swiper-slide {
            height: 260px !important;
          }
        }

        .team-item {
          width: 305px;
          position: relative;
          cursor: pointer;
          margin-bottom: 25px;

          img {
            width: 100%;
            height: 198px;
            display: block;
            object-fit: cover;
          }

          .mask {
            margin: 16px 0 6px;
            width: 100%;
            text-align: center;
            font-size: 20px;
            font-weight: 500;
            color: #434343;
          }
        }
      }
    }
  }

  .common-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 0 54px;
    margin: 0 auto;
    margin-bottom: 40px;

    .title {
      color: #262626;
      font-size: 20px;

      span {
        font-size: 32px;
        font-weight: 600;

        &>span {
          color: var(--theme-color);
        }
      }
    }

    .more {
      color: #262626;
      font-weight: bold;
      font-size: 20px;
      display: flex;
      align-items: center;

      span {
        cursor: pointer;
        margin: 0 22px;
      }

      .line {
        width: 31px;
        border: 1px solid #D3D3D3;
      }
    }
  }
}
</style>
<style>
.map-tooltip {
  min-width: 160px;

  .show-desc {
    display: flex;
    justify-content: space-between;
  }

  .map-red {
    color: var(--theme-color);
  }
}
</style>